<template>
  <!-- 图表容器，必须指定宽高 -->
  <div id="echartsRight" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import * as d3 from 'd3';

const drawLineChart = (containerId, data) => {
  // 获取容器元素
  const container = d3.select(`#${containerId}`);

  // 获取容器实际尺寸
  const containerWidth = container.node().getBoundingClientRect().width;
  const containerHeight = container.node().getBoundingClientRect().height;

  // 边距配置
  const margin = { top: 20, right: 30, bottom: 60, left: 50 };  // 增加底部边距以适应长文本

  // 计算实际绘图区域尺寸
  const width = containerWidth - margin.left - margin.right;
  const height = containerHeight - margin.top - margin.bottom;

  // 创建SVG画布
  const svg = container.append('svg')
      .attr('width', containerWidth)
      .attr('height', containerHeight)
  const chart = svg.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

  // 创建比例尺 (X轴改为序数比例尺)
  const fruits = data.map(d => d.fruit);
  //函数映射关系
  const xScale = d3.scalePoint()
      .domain(fruits)
      .range([0, width])
  console.log("画布宽度",width)
  fruits.forEach(fruit => {
    console.log(fruit,xScale(fruit))
  })
  const yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height, 0]);

  // 创建折线生成器
  const line = d3.line()
      .x(d => xScale(d.fruit))
      .y(d => yScale(d.value))
      .curve(d3.curveMonotoneX);

  // 绘制折线
  chart.append('path')
      .datum(data)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', 2)
      .attr('d', line);//默认传参数

  // 添加数据点
  chart.selectAll(".dot")
      .data(data)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("cx", d => xScale(d.fruit))
      .attr("cy", d => yScale(d.value))
      .attr("r", 5)
      .attr("fill", "#ff7f0e");
  //
  // 创建坐标轴 (X轴改为分类轴)
  const xAxis = d3.axisBottom(xScale);
  const yAxis = d3.axisLeft(yScale);

  // 添加X轴
  const xAxisGroup = chart.append('g')
      .attr('transform', `translate(0, ${height})`)
      .call(xAxis);

  // 旋转X轴标签避免重叠
  xAxisGroup.selectAll("text")
      .attr("transform", "rotate(-45)")
      .style("text-anchor", "end")
      .attr("dx", "-0.8em")
      .attr("dy", "0.15em");
  //
  // 添加Y轴
  chart.append('g')
      .call(yAxis);

  // 添加轴标签
  chart.append('text')
      .attr('x', width / 2)
      .attr('y', height + margin.bottom - 10)
      .style('text-anchor', 'middle')
      .text('水果种类');

  chart.append('text')
      .attr('transform', 'rotate(-90)')
      .attr('y', -margin.left + 15)
      .attr('x', -height / 2)
      .style('text-anchor', 'middle')
      .text('销售数量');
};

onMounted(() => {
  // 修改数据结构：date → fruit
  const graphData = [
    { fruit: '苹果', value: 30 },
    { fruit: '香蕉', value: 40 },
    { fruit: '橙子', value: 35 },
    { fruit: '葡萄', value: 45 },
    { fruit: '芒果', value: 50 },
    { fruit: '西瓜', value: 60 },
    { fruit: '菠萝', value: 42 }
  ];

  drawLineChart('echartsRight', graphData);
});
</script>
<style scoped>
</style>
